<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { router } from '@/router'
import { getRecommandProducts } from '@/api/modules/product'

const goods = ref([])

onMounted(() => {
  getGoods()
})

const getGoods = () => {
  getRecommandProducts().then(res => {
    goods.value = res.data
  })
}

const changePage = (ids:string,type:string) => {
  router.push({path:'/product',query:{name:ids,type:type}})
}
</script>

<template>
  <p class="bottom-command-view-top">为你推荐</p>
  <ul class="goods">
    <li v-for="(good,index) in goods" :key="index" class="goods-list">
      <a target="_blank" @click="changePage(good.id,good.type)">
        <el-card   shadow="hover" >
          <el-image :src="good.url" fit="cover" class="goods-img" />
          <div class="goods-info">
            <p class="goods-name">{{good.name}}</p>
            <p class="goods-price">￥{{good.price}}</p>
          </div>
        </el-card>
      </a>
    </li>
  </ul>
  <el-divider />
</template>

<style scoped>
  .bottom-command-view-top{
    font-size: xxx-large;
    text-align: center;
    font-weight: bolder;
    font-family: "幼圆";
    min-width: 248px;
  }

  .goods{
    width: 80%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    min-width: 248px;
    margin-left: 10%;
    text-align: center;
  }

  .goods-list{
    width: 230px;
    height:330px;
    margin-top:50px;
  }

  .goods-list:hover .goods-name{
    color: red;
  }

  .goods-list:hover .goods-img{
    opacity: 0.5;
  }

  .goods-img{
    width: 150px;
    height: 150px;
  }

  .goods-name{
    margin-top: 40px;
    height:48px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .goods-price{
    color: red;
    font-size: large;
  }

</style>